<template>
  <el-breadcrumb class="breadcrumb-container" separator="/" v-if="isshowwork">
    <el-breadcrumb-item v-for="item in list" :key="item.path">
      <span> {{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  export default {
    name: 'VabBreadcrumb',
    data() {
      return {
        //是否显示工作台字段(是否显示面包屑导航)-----2021-1-13
        isshowwork:true,
        list: this.getBreadcrumb(),
      }
    },
    watch: {
      $route() {
        this.list = this.getBreadcrumb()
      }
    },

    methods: {
      getBreadcrumb() {
        //筛选item.name的为Dashboard 如果是Dashboard 就隐藏面包屑
         return this.$route.matched.filter((item,index)=>{
            if(item.name && item.meta.title&&item.name!='Dashboard'){
              this.isshowwork = true
              return item
            }else{
              this.isshowwork = false
            }
        })
      },
    },
    mounted(){
      this.list = this.getBreadcrumb()

    }
  }
</script>

<style lang="scss" scoped>
  .breadcrumb-container {
    height: 40px;
    font-size: $base-font-size-default;
    line-height:40px;

    ::v-deep {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          a {
            display: flex;
            float: left;
            font-weight: normal;
            color: #515a6e;

            i {
              margin-right: 3px;
            }
          }
        }

        &:last-child {
          .el-breadcrumb__inner {
            a {
              color: #999;
            }
          }
        }
      }
    }
  }
</style>
